<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站访问时间限制</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            color: white;
            overflow: hidden;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .container {
            text-align: center;
            max-width: 800px;
            padding: 40px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            z-index: 10;
            position: relative;
        }

        h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .message {
            font-size: 1.5rem;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .time-display {
            font-size: 1.8rem;
            margin: 20px 0;
            font-weight: 600;
        }

        .countdown-container {
            margin: 30px 0;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .countdown-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .countdown-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .countdown-value {
            font-size: 2.5rem;
            font-weight: bold;
            background: rgba(255, 255, 255, 0.2);
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            margin-bottom: 10px;
        }

        .countdown-label {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .access-info {
            margin-top: 30px;
            font-size: 1.2rem;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
        }

        .clock-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        .floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .floating-element {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            100% {
                transform: translateY(-1000px) rotate(720deg);
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
                margin: 20px;
            }

            h1 {
                font-size: 2.5rem;
            }

            .countdown {
                flex-wrap: wrap;
            }

            .countdown-value {
                width: 60px;
                height: 60px;
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
<div class="floating-elements" id="floatingElements"></div>

<div class="container">
    <div class="clock-icon">⏰</div>
    <h1 id="title">网站访问时间限制</h1>
    <div class="message" id="message"></div>
    <div class="time-display" id="currentTime"></div>

    <div class="countdown-container" id="countdownContainer">
        <div class="countdown-title">距离下次可访问时间</div>
        <div class="countdown">
            <div class="countdown-item">
                <div class="countdown-value" id="hours">00</div>
                <div class="countdown-label">小时</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-value" id="minutes">00</div>
                <div class="countdown-label">分钟</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-value" id="seconds">00</div>
                <div class="countdown-label">秒</div>
            </div>
        </div>
    </div>

    <div class="access-info">
        本网站开放时间：每天 06:00 - 23:00
    </div>
</div>

<script>
    // 创建浮动元素
    function createFloatingElements() {
        const container = document.getElementById('floatingElements');
        const count = 15;

        for (let i = 0; i < count; i++) {
            const element = document.createElement('div');
            element.classList.add('floating-element');

            // 随机大小和位置
            const size = Math.random() * 60 + 20;
            element.style.width = `${size}px`;
            element.style.height = `${size}px`;
            element.style.left = `${Math.random() * 100}%`;
            element.style.top = `${Math.random() * 100}%`;

            // 随机动画延迟和时长
            element.style.animationDelay = `${Math.random() * 15}s`;
            element.style.animationDuration = `${Math.random() * 20 + 10}s`;

            container.appendChild(element);
        }
    }

    // 更新时间显示
    function updateTimeDisplay() {
        const now = new Date();
        const timeString = now.toLocaleTimeString('zh-CN');
        document.getElementById('currentTime').textContent = `当前时间: ${timeString}`;
    }

    // 检查访问时间
    function checkAccessTime() {
        const now = new Date();
        const currentHour = now.getHours();
        const currentMinute = now.getMinutes();

        // 检查是否在允许访问的时间段内 (06:00-23:00)
        const isAccessTime = currentHour >= 6 && currentHour < 23;

        const title = document.getElementById('title');
        const message = document.getElementById('message');
        const countdownContainer = document.getElementById('countdownContainer');

        if (isAccessTime) {
            title.textContent = "欢迎访问";
            message.textContent = "当前时间在允许访问范围内，您可以正常浏览网站内容。";
            countdownContainer.style.display = 'none';
        } else {
            title.textContent = "访问受限";
            message.textContent = "抱歉，当前时间不在网站开放时间内。请在工作时间（06:00-23:00）内访问。";
            countdownContainer.style.display = 'block';

            // 计算距离下次可访问时间
            let nextAccessTime;
            if (currentHour < 6) {
                // 如果当前时间在0点到6点之间，下一次可访问时间是当天6点
                nextAccessTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0);
            } else {
                // 如果当前时间在23点之后，下一次可访问时间是第二天6点
                nextAccessTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 6, 0, 0);
            }

            // 更新倒计时
            updateCountdown(nextAccessTime);
        }
    }

    // 更新倒计时
    function updateCountdown(targetTime) {
        const now = new Date();
        const timeDiff = targetTime - now;

        if (timeDiff <= 0) {
            // 倒计时结束，重新检查访问时间
            checkAccessTime();
            return;
        }

        // 计算小时、分钟和秒
        const hours = Math.floor(timeDiff / (1000 * 60 * 60));
        const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        // 更新显示
        document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
        document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
        document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    }

    // 初始化
    function init() {
        createFloatingElements();
        updateTimeDisplay();
        checkAccessTime();

        // 每秒更新时间和倒计时
        setInterval(() => {
            updateTimeDisplay();
            checkAccessTime();
        }, 1000);
    }

    // 页面加载完成后初始化
    window.addEventListener('load', init);
</script>
</body>
</html>